<template>
  <CommonPanel title="今日车辆数据统计">
       <div class="content-box1">
      <div class="content-box1_bottom">
        <div class="echart-box">
          <!-- <CommonChart ref="myChart" :option="option" /> -->
        </div>
        <div class="connent-box">
          <div class="connent-box_top">
            <div class="text-box">固定车</div>
            <div class="value-box"> {{data?.regular_car}}</div>
          </div>
          <div class="connent-box_bottom">
            <div class="text-box">临时车</div>
            <div class="value-box">{{data?.temporary_car}}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-on:click="()=>console.log(data?.regular_car/(data?.temporary_car+data?.regular_car)*100)" class="content-box2" style="color: #fff;width: 80%;margin: 0 auto;">
      <div style="display: flex;justify-content: space-between;margin-bottom: 4px;">
        <div><span style="width: 6px;height: 6px;background: #71b6ec;display: inline-block;"></span> 固定车 {{ (data?.regular_car/(data?.temporary_car+data?.regular_car)*100).toFixed(0) }}%</div>
        <div><span style="width: 6px;height: 6px;background: #d3a14c;display: inline-block;"></span> 临时车 {{ (data?.temporary_car/(data?.temporary_car+data?.regular_car)*100).toFixed(0) }}%</div>
      </div>
      <div style="width: 100%;height: 6px;background-color: #d3a14c;position: relative;border-radius: 4px;">
        <div :style="{borderRadius: '4px',position: 'relative',background: '#71b6ec',height: '100%',width:`${data?.regular_car/(data?.temporary_car+data?.regular_car)*100}%`}"></div>
      </div>
    </div>
    <!-- <Teleport to="body">
      <CommonDialog v-model:visible="visible" :title="title">
        <ScrollTable :columns="columns" :tableData="facilities" />
      </CommonDialog>
    </Teleport> -->
  </CommonPanel>
</template>

<script setup>

import { computed, watch } from "vue";
import { ref, onMounted } from "vue";
import { defineProps } from "vue";
const props = defineProps({
  data: Object
});



</script>

<style lang="scss" scoped>
.content-box1 {
  height: 80%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;
  background-image: url('@/assets/car_1.png');
  background-repeat: no-repeat;
  background-size: contain;
  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9BA3AE;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65E3F8;
    }
  }

  &_bottom {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;

    .echart-box {
      flex: 0.7;
      height: 100%;
      
    }

    .connent-box {
      flex: 1.3;
      height: 70%;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-row-gap: 5px;

      &_top {
        background: url('../../../assets/image/device1.png') no-repeat center ;
        display: flex;
        background-size: 50%;
        justify-content: space-evenly;
        align-items: center;
      }

      &_bottom {
        background: url('../../../assets/image/device2.png') no-repeat center ;
        display: flex;
        background-size: 50%;
       justify-content: space-evenly;
        align-items: center;
      }

      .value-box {
        
        color: #fff;
        font-size: 24px;
      }

      .text-box {
        color: #fff;
        margin-left: 30%;
        font-size: 14px;
      }

    }

  }
}
</style>
